<template>
  <el-dialog :model-value="show" title="添加活动" @close="emit('hide')">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-config-provider :locale="locale">
        <el-form-item label="活动标题:" prop="title">
          <el-input v-model="form.title" style="width: 50%" />
        </el-form-item>
        <el-form-item label="开始时间:" prop="startDate">
          <el-date-picker
            type="date"
            placeholder="选择时间"
            v-model="form.startDate"
            style="width: 50%"
          />
        </el-form-item>
        <el-form-item label="结束时间:" prop="endDate">
          <el-date-picker
            type="date"
            placeholder="选择时间"
            style="width: 50%"
            v-model="form.endDate"
          />
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group class="ml-4" v-model="form.status">
            <el-radio :label="1">上线</el-radio>
            <el-radio :label="0">下线</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-config-provider>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ElButton,
  ElConfigProvider,
  ElDatePicker,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElRadio,
  ElRadioGroup,
  FormInstance,
  FormRules,
} from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { addFlashApi, editFlashApi } from "./api";
const route = useRoute();
const locale = zhCn;
const emit = defineEmits(["hide"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "",
  },
  startDate: {
    type: String,
    default: "",
  },
  endDate: {
    type: String,
    default: "",
  },
  status: {
    type: Number,
    default: 0,
  },
});

const form = reactive<IFlashList>({
  id: 0,
  title: "",
  startDate: "",
  endDate: "",
  status: 0,
});
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      form.id = props.id;
      form.title = props.title;
      form.startDate = props.startDate;
      form.endDate = props.endDate;
      form.status = props.status;
    }
  }
);

const formRef = ref<FormInstance>();
// 校验规则
const rules = reactive<FormRules>({
  title: [{ required: true, trigger: "blur", message: "请输入标题" }],
  startDate: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
  endDate: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
});

// 取消
const cancel = () => {
  formRef.value?.resetFields();
  (form.id = 0),
    (form.title = ""),
    (form.startDate = ""),
    (form.endDate = ""),
    (form.status = 0),
    emit("hide", true);
};
// 添加
const addFlash = () => {
  ElMessageBox.confirm("是否要确认添加活动？", "添加活动", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      // 发送请求
      addFlashApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("添加成功");
          formRef.value?.resetFields();
          // 关闭对话框并刷新数据
          emit("hide", true);
          // 清空数据
        }
      });
    })
    .catch(() => {
      console.log("点击取消");
    });
};
// 编辑
const editFlash = () => {
  console.log(form.id);

  ElMessageBox.confirm("确定要修改吗？", "修改信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      editFlashApi(form).then((res) => {
        if (res.code === 200) {
          console.log(form);
          ElMessage.success("修改成功");
          formRef.value?.resetFields();
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};
// 确定按钮
const submitFn = () => {
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      if (props.id === 0) {
        addFlash();
      } else {
        editFlash();
      }
    } else {
      ElMessage.error("添加失败");
    }
  });
};
</script>

<style lang="less" scoped></style>
